<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
	<base href="<%=basePath%>">
	<meta charset="utf-8" />
	<!-- 移动设备的支持 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- ie8 标准版的渲染模式 -->
	<meta http-equiv="X-UA-Compatible" content="edge" />
	<title>个人博客-个人笔记</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="css/mynote.css"/>
	<link rel="icon" href="img/面具.ico" type="image/x-icon">
	<link rel="shortcut icon" href="img/面具.ico" type="image/x-icon">
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	
	</head>
		<c:if test="${empty articles}">
			<c:redirect url="note.do?typeId=1"></c:redirect>
		</c:if>
	<body>
		<!-- 导航条 -->
		<div class="head-nav"></div>
		<!-- 导航条结束 -->
		<div class="container">
			<div class="row">
				<div class="col-md-7" id="leftContent">
					<p><span class="glyphicon glyphicon-triangle-bottom"></span>&nbsp;&nbsp;标签 "个人笔记" 相关的文章 </p>
					<!-- 当个文章开始  一共显示六个-->
					<c:forEach var="articele" items="${articles }">
						<div class="content">
						<div class="div-img">
							<a href="info.do?aid=${articele.aid}">
							<img src="${articele.img }" class="img-rounded img-responsive" >
							</a>
						</div>
						<div class="content-right">
							<h3>${articele.title }</h3>
							<p>${articele.summary} }</p>
							<div id="bottom">
								<a href="info.do?aid=${articele.aid}" class="btn btn-danger btn-xs">查看详情</a>
								<span id="">
									<fmt:formatDate type="date" value="${articele.createTime}"/>
								</span>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
					</c:forEach>
					
					<div class="text-center" >
						<a href="javascript:void(0)" class="btn btn-link" id="more" >更多内容</a>
					</div>
					</div>
					<div class="col-md-5 hidden-sm" style="margin-top: 35px;">
						<div class="sidebar">
							<h2 class="title">文章点击排行</h2>
							<i class="title-underline"></i>
							<ul class="list-unstyled">
							<c:forEach var="item" items="${ranking }">
									<li><a href="info.do?aid=${item.aid}">${item.title }</a></li>
							</c:forEach>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 蜘蛛被背景 -->
			<div style="float:right;" id="hub_iframe"></div>
			<div class="myfooter"></div>
			<script type="text/javascript">
				var $j=jQuery.noConflict();
				jQuery(document).ready(function($){
				$(".head-nav").load("import/nav.html",function(){
					$(".head-nav ul li:eq(2)").addClass('active');
				})
				$('.myfooter').load("import/footer.html");
				//下划线边长
				$(".title").hover(function(){
					$(this).next().animate({"padding-left":"80px"},500)
				},function(){
					$(this).next().animate({"padding-left":"40px"},500)
				})
				//排行榜
				$(".list-unstyled li").hover(function(){
					$(this).addClass("bg-info").find("a").css("padding-left","10px");
					
				},function(){
					$(this).removeClass("bg-info").find("a").css("padding-left","0px");;
				})
				//获取更多
				$('#more').click(function(){
					var count=$('.content').length;
					$.post("note.do",'nowCount='+count+'&typeId=1',function(data){
						if(data!=false){
							$.each(data,function(i,dom){
								var $bitDiv=$('<div class="content tempanim"><div>');
								var $imgDiv=$('<div class="div-img"><a href="info.do?aid='+this.aid+'"><img src="'+this.img+'" class="img-rounded img-responsive" ></a></div>')
								var $rightDiv=$('<div class="content-right"><h3>'+this.title+'</h3><p>'+this.summary+'</p></div>');
								var $bottomDiv=$('<div id="bottom"><a href="info.do?aid='+this.aid+'" class="btn btn-danger btn-xs">查看详情</a><span>'+this.createTime+'</span></div>')
								$bitDiv.append($imgDiv);
								$rightDiv.append($bottomDiv);
								$bitDiv.append($rightDiv);
								$bitDiv.append('<div class="clearfix"></div>');
								$('#more').parent().before($bitDiv);
							})
						}
						else{
							$('#more').replaceWith('<span>暂无更多</span>');
						}
						setTimeout(function(){$('.tempanim').fadeIn(1200); }, 300);
					},"json")
				})
			
			})
		</script>
		
		<script src="js/spider.js" type="text/javascript" charset="utf-8"></script>
	</body>
	
</html>
